{extend name="base" /}
{block name="body"}
<div class="layui-body">
    <!--tab标签-->
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">官网图片</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form form-container" action="{:url('admin/system/updateIndex')}" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">首页最大图</label>
                        <div class="layui-input-block">
                            <input type="text" name="site_index[big_img]" value="{$site_index.big_img|default=''}" placeholder="（选填）请上传图片" class="layui-input layui-input-inline" id="big_img"> 640*480
                            <input type="file" name="big_img" class="layui-upload-file">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">环境图片</label>
                        <div class="layui-input-block">
                            <input type="text" name="site_index[middle_img]" value="{$site_index.middle_img|default=''}" placeholder="（选填）请上传图片" class="layui-input layui-input-inline" id="middle_img"> 720*480
                            <input type="file" name="middle_img" class="layui-upload-file">
                        </div>
                    </div>
                    <span style="display:none;"><textarea name="content" placeholder="" class="layui-textarea" id="content"></textarea></span>
                    <div class="layui-form-item">
                        <label class="layui-form-label">活动、工作</label>
                        <div class="layui-input-block">
                            <button type="button" id="upload-photo-btn" class="layui-btn">上传图集</button> 640*480 （两张）
                            <div id="photo-container">
                                {if condition="$small_img"}
                                    {foreach name="$small_img" item="v"}
                                        <div class="photo-list"><input type="text" name="small_img[]" value="{$v}" class="layui-input layui-input-inline">
                                        <button type="button" class="layui-btn layui-btn-danger remove-photo-btn">移除</button></div>
                                    {/foreach}
                                {/if}
                            </div>
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">公司动态</label>
                        <div class="layui-input-block">
                            <button type="button" id="upload-dynamics-btn" class="layui-btn">上传图集</button> 640*480 （三张）
                            <div id="photo-dynamics">
                                {if condition="$dynamics"}
                                    {foreach name="$dynamics" item="v"}
                                        <div class="photo-list"><input type="text" name="small_img[]" value="{$v}" class="layui-input layui-input-inline">
                                        <button type="button" class="layui-btn layui-btn-danger remove-photo-btn">移除</button></div>
                                    {/foreach}
                                {/if}
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">关于我们</label>
                        <div class="layui-input-block">
                            <input type="text" name="site_index[about_img]" value="{$site_index.middle_img|default=''}" placeholder="（选填）请上传图片" class="layui-input layui-input-inline" id="about_img"> 720*480
                            <input type="file" name="about_img" class="layui-upload-file">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">公司实景</label>
                        <div class="layui-input-block">
                            <input type="text" name="site_index[environment_img]" value="{$site_index.environment_img|default=''}" placeholder="（选填）请上传图片" class="layui-input layui-input-inline" id="environment_img"> 720*480
                            <input type="file" name="environment_img" class="layui-upload-file">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="*">提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script src="__JS__/kindeditor/kindeditor.config.js"></script>
<script src="__JS__/kindeditor/kindeditor-all-min.js"></script>
{/block}
{block name="script"}
<script>
    $(document).ready(function () {
        var _kindEditor;
        KindEditor.ready(function(K) {
            _kindEditor = K.create('#content', KindEditorOptions);

            K('#upload-photo-btn').click(function () {
                var photo_list_item = '';
                _kindEditor.loadPlugin('multiimage', function() {
                    _kindEditor.plugin.multiImageDialog({
                        showRemote : false,
                        imageUrl : K('#small_img').val(),
                        clickFn : function(data) {
                            $.each(data, function (index, item) {
                                photo_list_item += '<div class="photo-list"><input type="text" name="small_img[]" value="' + item.url + '" class="layui-input layui-input-inline">';
                                photo_list_item += '<button type="button" class="layui-btn layui-btn-danger remove-photo-btn">移除</button></div>'
                            });
                            $('#photo-container').append(photo_list_item);
                            _kindEditor.hideDialog();
                        }
                    });
                });
            });

            K('#upload-dynamics-btn').click(function () {
                var photo_list_item = '';
                _kindEditor.loadPlugin('multiimage', function() {
                    _kindEditor.plugin.multiImageDialog({
                        showRemote : false,
                        imageUrl : K('#dynamics').val(),
                        clickFn : function(data) {
                            $.each(data, function (index, item) {
                                photo_list_item += '<div class="photo-list"><input type="text" name="dynamics[]" value="' + item.url + '" class="layui-input layui-input-inline">';
                                photo_list_item += '<button type="button" class="layui-btn layui-btn-danger remove-photo-btn">移除</button></div>'
                            });
                            $('#photo-dynamics').append(photo_list_item);
                            _kindEditor.hideDialog();
                        }
                    });
                });
            });
        });

        $('#photo-container').on('click', '.remove-photo-btn', function () {
            $(this).parent('.photo-list').remove();
        });
        $('#photo-dynamics').on('click', '.remove-photo-btn', function () {
            $(this).parent('.photo-list').remove();
        });
    });
</script>
{/block}